<div id="top-left">
  <span class="location-title">总览</span>
</div>
<div class="home-content">
  <div class="user-info">
    <img src="/assets/images/header-default.png" />
    <div class="info-basic">
      <div class="user-name">{{data.userName}}</div>
      <div class="user-status">
        账号类型：{{data.authentication === 0 ? '*未认证' : data.authentication === 100 ? '已认证' : data.authentication === 1 ?
        '认证中' : data.authentication === -1 ? '认证失败' : ''}}
        <br />
        最近登录：{{data.lastLoginIp}}
        <br />
        登录时间：{{data.lastLoginDate | date:'yyyy-MM-dd HH:mm:ss'}}
      </div>
    </div>
    <div class="user-auth">
      <div class="auth-icon">
        <i nz-icon nzType="mobile" [class]="data.isPhoneAuth ? 'auth-yes': 'auth-no'" nzTheme="outline"></i>
        <i nz-icon nzType="mail" [class]="data.isEmailAuth ? 'auth-yes': 'auth-no'" nzTheme="outline"></i>
        <i nz-icon nzType="idcard" [class]="data.authentication === 100 ? 'auth-yes': 'auth-no'" nzTheme="outline"></i>
      </div>
      <div class="auth-grade">
        当前安全等级<br />
        <button nz-button nzType="primary"><i nz-icon nzType="lock"></i>{{securityGrade}}</button>
      </div>
    </div>
  </div>
  <div class="account-info">
    <div>
      <nz-card>
        <nz-statistic [nzValue]="(data.balance | number: '1.2-2')!" [nzTitle]="'账户余额'" [nzPrefix]="prefixTplOne"
          [nzValueStyle]="{ color: '#3F8600' }">
        </nz-statistic>
        <ng-template #prefixTplOne><i nz-icon nzType="pay-circle"></i></ng-template>
      </nz-card>
    </div>
    <div>
      <nz-card>
        <nz-statistic [nzValue]="data.timeBalance" [nzTitle]="'剩余时长'" [nzSuffix]="'分钟'" [nzPrefix]="prefixTplOne1"
          [nzValueStyle]="{ color: '#FF0000' }">
        </nz-statistic>
        <ng-template #prefixTplOne1><i nz-icon nzType="field-time"></i></ng-template>
      </nz-card>
    </div>
    <div>
      <nz-card>
        <nz-statistic
          [nzValue]="((data.useSpace > 1048576 ? (data.useSpace / 1048576) : (data.useSpace / 1024)) | number: '1.1-2')!"
          [nzTitle]="'视频库使用量'" [nzPrefix]="prefixTplTwo" [nzSuffix]="data.useSpace > 1048576 ? 'GB' : 'MB'"
          [nzValueStyle]="{ color: '#CF1322' }">
        </nz-statistic>
        <ng-template #prefixTplTwo><i nz-icon nzType="cloud"></i></ng-template>
      </nz-card>
    </div>
    <div>
      <nz-card>
        <nz-statistic [nzValue]="statData['livelibCount']" [nzTitle]="'开设直播间'" [nzPrefix]="prefixTplThree"
          [nzSuffix]="'个'" [nzValueStyle]="{ color: '#1890ff' }">
        </nz-statistic>
        <ng-template #prefixTplThree><i nz-icon nzType="video-camera" nzTheme="outline"></i></ng-template>
      </nz-card>
    </div>
    <div>
      <nz-card>
        <nz-statistic [nzValue]="(statData['vodlibCount'] | number: '1.0-0')!" [nzTitle]="'视频点播数'"
          [nzPrefix]="prefixTplFour" [nzSuffix]="'个'" [nzValueStyle]="{ color: '#f8bf3a' }">
        </nz-statistic>
        <ng-template #prefixTplFour><i nz-icon nzType="arrow-up"></i></ng-template>
      </nz-card>
    </div>
    <div>
      <nz-card>
        <nz-statistic [nzValue]="(statData['pageCount'] | number: '1.0-0')!" [nzTitle]="'定制页面数'"
          [nzPrefix]="prefixTplFive" [nzSuffix]="'个'" [nzValueStyle]="{ color: '#28c404' }">
        </nz-statistic>
        <ng-template #prefixTplFive><i nz-icon nzType="arrow-down"></i></ng-template>
      </nz-card>
    </div>
  </div>
  <div class="plant-log">
    <div class="live-log">
      <div class="live-log-title">直播记录</div>
      <div class="live-log-item">
        <span>2020-12-04</span><span>直播间1</span><span>:</span><span>进行了1小时直播，观看人数合计3040人</span>
      </div>
      <div class="live-log-item">
        <span>2020-12-14</span><span>VIP直播间</span><span>:</span><span>进行了3小时直播，观看人数合计9204人</span>
      </div>
    </div>
    <div class="article-log">
      <div>
        <div class="article-log-title">平台资讯</div>
        <div class="article-log-item" *ngFor="let item of articleList3; let no = index;">
          <a (click)="showDetail('平台资讯', no)"><span>[紧急通知]</span>{{item.title}}</a>
        </div>
      </div>
      <div>
        <div class="article-log-title">更新日志</div>
        <div class="article-log-item" *ngFor="let item of articleList1; let no = index;">
          <a (click)="showDetail('更新日志', no)"><span>[{{item.date | date: 'yyyy-MM-dd'}}]</span>{{item.title}}</a>
        </div>
      </div>
    </div>
  </div>
</div>
<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isDetailShow" (nzOnCancel)="close()"
  [nzMaskClosable]="false" nzWidth="800" [nzTitle]="articleType" [nzFooter]="null">
  <div class="article-container">
    <div class="detail-title">{{article.title}}</div>
    <div class="detail-content" [innerHTML]="article.content"></div>
  </div>
</nz-modal>
